<template>
  <div class="box">
    <!-- 头部 -->
    <div class="hearder">
      <div class="heatext">起点中文网</div>
      <div class="age">
        <router-link tag="div" to="/schoolboy" class="com">男生</router-link>
        <router-link tag="div" to="/girlstudent">女生</router-link>
      </div>
      <div class="my">
        <router-link
          tag="div"
          to="/userinfo"
          class="iconfont icon-31wode"
        ></router-link>
        <router-link tag="div" to="/bookshelf" class="iconfont icon-wodeshujia"></router-link>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 搜索 -->
    <router-link tag="div" to="/search" class="search">
      <div class="inp">星界使徒</div>
    </router-link>
    <!-- 分类 -->
    <div class="home-nav">
      <router-link tag="div" to="/classification" class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenlei"></use>
        </svg>
        <div>分类</div>
      </router-link>
      <router-link tag="div" to="/rankinglist" class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-daochu1024-02"></use>
        </svg>
        <div>排行榜</div>
      </router-link>
      <router-link tag="div" to="/cover" class="item">
        <svg class="icon" aria-hidden="true">
          <use
            xlink:href="#icon-a-travelhotelholidayvacationcdlistingboo"
          ></use>
        </svg>
        <div>免费</div>
      </router-link>
      <router-link tag="div" to="/end" class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wanjietuijian"></use>
        </svg>
        <div>完本</div>
      </router-link>
      <router-link tag="div" to="/okami" class="item">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-huangguan"></use>
        </svg>
        <div>大神</div>
      </router-link>
    </div>
    <!-- 热门小说 -->
    <div class="hot">
      <div class="hotnav">
        <div class="div">热门小说</div>
        <span>起点编辑推荐</span>
      </div>
      <!-- 书籍 -->
      <div class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in imalists"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐 -->
    <!-- <div class="recommend">
      <div class="left">新书强推</div>
      <div class="right">三江·网文新风</div>
    </div> -->
    <!-- 限时免费 -->
    <div class="hot">
      <div class="hotnav">
        <div class="div">限时免费</div>
        <van-count-down class="vancountdown" :time="time">
          <template #default="timeData">
            <span class="dayblock">{{ timeData.days }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
        <router-link tag="div" to="/cover" class="more"
          >更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span
        ></router-link>
      </div>
      <!-- 书籍 -->
      <div class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in free"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="hot" style="height: 267px">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">排行榜</div>
        <router-link tag="div" to="/rankinglist" class="more">
          更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span>
        </router-link>
      </div>
      <!-- 分类 -->
      <div class="switch">
        <div
          v-for="(item, index) in ranking"
          :key="index"
          :class="num == index ? 'switchcon' : ''"
          @click="num = index"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 书籍 -->
      <div v-show="num == 0" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in seller"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="num == 1" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in cloud"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="num == 2" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in contract"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="num == 3" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in recommend"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新书抢鲜 -->
    <div class="hot">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">新书抢鲜</div>
        <span>24小时热销新书</span>

        <router-link :to="'/more?name=' + '新书抢鲜'" tag="div" class="more"
          >更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span
        ></router-link>
      </div>
      <!-- 新书推荐 -->
      <div class="newarrivals">
        <div @click="bookdeta(item.id)" v-for="item in newbook" :key="item.id" class="newbook">
          <div class="left">
            <img :src="item.newbookimages" alt="" />
          </div>
          <div class="right">
            <div class="top">{{ item.bookname }}</div>
            <div class="centenr">
              {{ item.newbookintroduce }}
            </div>
            <div class="bottom">
              <div class="bookname">
                <span class="iconfont icon-31wode"></span>{{ item.author }}
              </div>
              <div class="label">
                <span>{{ item.type }}</span
                ><span>{{ item.serial }}</span
                ><span>{{ item.words }}万字</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 畅销完本 -->
    <div class="hot">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">畅销完本</div>
        <span>今日畅销完本书</span>
        <router-link tag="div" :to="'/more?name=' + '畅销完本'" class="more"
          >更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span
        ></router-link>
      </div>
      <!-- 畅销完本书 -->
      <div class="newarrivals">
        <div @click="bookdeta(item.id)" v-for="item in bestseller" :key="item.id" class="newbook">
          <div class="left">
            <img :src="item.newbookimages" alt="" />
          </div>
          <div class="right">
            <div class="top">{{ item.bookname }}</div>
            <div class="centenr">
              {{ item.newbookintroduce }}
            </div>
            <div class="bottom">
              <div class="bookname">
                <span class="iconfont icon-31wode"></span>{{ item.author }}
              </div>
              <div class="label">
                <span>{{ item.type }}</span
                ><span>{{ item.serial }}</span
                ><span>{{ item.words }}万字</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类推荐 -->
    <div class="hot">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">分类推荐</div>
        <span>频道主编推荐</span>
        <router-link tag="div" to="/classification" class="more"
          >更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span
        ></router-link>
      </div>
      <!-- 第一行分类 -->
      <div class="switch">
        <div  v-for="(item,index) in rankings.slice(0,3)" :key="index" :class="nums == index ? 'switchcon' : ''" @click="nums = index">
          {{item.name}}
        </div>
      </div>
      <!-- 第一行书籍 -->
      <div v-show="nums == 0" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in fantasy"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第一行书籍 -->
      <div v-show="nums == 1" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in martial"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第一行书籍 -->
      <div v-show="nums == 2" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in urban"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二行分类 -->
      <div class="switch">
        <div v-for="(item,index) in rankings.slice(3,rankings.length)" :key="index" :class="numss == index ? 'switchcon' : ''" @click="numss = index">
          {{item.name}}
        </div>
      </div>
      <!-- 第二行书籍 -->
      <div v-show="numss == 0" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in military"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二行书籍 -->
      <div v-show="numss == 1" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in game"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二行书籍 -->
      <div v-show="numss == 2" class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div
              @click="bookdeta(item.id)"
              class="swiper-slide item"
              v-for="(item, index) in science"
              :key="index"
            >
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 轻小说 -->
    <div class="hot">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">轻小说</div>
        <router-link tag="div" :to="'/lightnovel?name=' + '轻小说'" class="more"
          >更多<span class="iconfont icon-arrowRight-copy-copy-copy"></span
        ></router-link>
      </div>
      <!-- 一行书籍 -->
      <div class="content">
        <!-- 轮播图 -->
        <div class="swiper-container-02">
          <div class="swiper-wrapper">
            <div class="swiper-slide item" @click="bookdeta(item.id)" v-for="item in novel" :key="item.id">
              <div class="img">
                <img :src="item.image" alt="" />
              </div>
              <p class="text">{{ item.title }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 精选专题 -->
    <div class="hot hotcon">
      <!-- 头部 -->
      <div class="hotnav">
        <div class="div">精选专题</div>
      </div>
      <!-- 广告 -->
      <div class="advertisement">
        <div v-for="(item, index) in advertisement" :key="index" class="img">
          <img :src="item" alt="" />
        </div>
      </div>
      <!-- 登录 -->
      <div v-show="logjudgment" class="signin">
        登录后获得更多特色功能
        <router-link tag="span" to="/login"> · 立即登录</router-link>
      </div>
    </div>
    <!-- 底部组件 -->
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/base/footers.vue";
import Vue from "vue";
import Swiper from "swiper";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  components: {
    footers,
  },
  data() {
    return {
      //轮播图数据
      images: [],
      //热门小说数据
      imalists: [],
      //限时免费
      free: [],
      //排行榜
      ranking: [],
      //畅销榜
      seller:[],
      //风云榜
      cloud:[],
      //签约榜
      contract:[],
      //推荐榜
      recommend:[],
      //排行榜分类
      rankings:[],
      fantasy:[],//排行榜分类-玄幻奇幻
      martial:[],//排行榜分类-武侠仙侠
      urban:[],//排行榜分类-都市职场
      military:[],//排行榜分类-历史军事
      game:[],//排行榜分类-游戏体育
      science:[],//排行榜分类-科幻悬疑
      //推荐新书列表
      newbook: [],
      // 畅销完本书
      bestseller: [],
      // 轻小说
      novel: [
        {
          id: 0,
          image: "https://bookcover.yuewen.com/qdbimg/349573/1031330119/150",
          title: "从假面骑士编年史开始",
          name: "倾白平",
        },
        {
          id: 1,
          image: "https://bookcover.yuewen.com/qdbimg/349573/1031568253/150",
          title: "仙子别闹了",
          name: "南风抚月",
        },
        {
          id: 2,
          image: "https://bookcover.yuewen.com/qdbimg/349573/1031004563/150",
          title: "成为岩王爷的我却干着诸天的活",
          name: "保底人保底魂",
        },
        {
          id: 3,
          image: "https://bookcover.yuewen.com/qdbimg/349573/1031015151/150",
          title: "人在迪迦，开局伽马未来！",
          name: "玖月樱花",
        },
        {
          id: 4,
          image: "https://bookcover.yuewen.com/qdbimg/349573/1031159995/150",
          title: "柯学送葬人",
          name: "净消尘土",
        },
      ],
      // 精选专题图片
      advertisement: [
        "//bossaudioandcomic-1252317822.file.myqcloud.com/activity/document/a44140fe96ce7479d5c1c577c60317d7.jpg",
        "//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/8ec38ff3b3c2baf9a4fa520faa4a3543.jpg",
        "//qidian.qpic.cn/qidian_common/349573/196e3d3bec0baee4ea0dcb40ddce2bb3/0",
        "//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/a1be753d0283d64f27c1eb9438783956.jpg",
      ],
      time: 30 * 60 * 60 * 1000, // 倒计时
      num: 0, //排行榜分类
      nums: 0, //推荐第一行分类
      numss: 0, //推荐第二行分类
      logjudgment: false, //登录判断
    };
  },
  mounted() {
    new Swiper(".swiper-container-02", {
      pagination: ".swiper-pagination-02",
      slidesPerView: 4.5,
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 30,
    });

    //获取数据
    this.$axios.get("/static.json").then((res) => {
      console.log(res)
      // 获取public下的test.json文件数据
      let data = res.data; //数据
      this.images = data.Rotation; //轮播图图片
      this.imalists = data.imalists; //热门小说
      this.free = data.free; //限时免费
      this.ranking = data.ranking; //排行榜
      this.seller = this.ranking[0].rankinglists; //排行榜-畅销
      this.cloud = this.ranking[1].rankinglists; //排行榜-风云
      this.contract = this.ranking[2].rankinglists;//排行榜-签约
      this.recommend = this.ranking[3].rankinglists;//排行榜-推荐
      this.rankings = data.rankings; //排行榜分类
      this.fantasy = this.rankings[0].rankinglists; //排行榜分类-玄幻奇幻
      this.martial  = this.rankings[1].rankinglists; //排行榜分类-武侠仙侠
      this.urban = this.rankings[2].rankinglists;//排行榜分类-都市职场
      this.military = this.rankings[3].rankinglists;//排行榜分类-历史军事
      this.game = this.rankings[4].rankinglists;//排行榜分类-游戏体育
      this.science  = this.rankings[5].rankinglists;//排行榜分类-科幻悬疑
      this.newbook = data.newbook;//推荐新书列表
      this.bestseller = data.bestseller;//畅销完本
      this.novel = data.novel;//轻小说列表
    });
    
  },
  methods: {
    // 路由跳转传参
    bookdeta(id) {
      this.$router.push({
        path: "/bookdetails",
        query: {
          id: id
        },
      });
    },
  },
  created() {
    let login = window.localStorage.getItem("token");
    // 判断没有值
    if (!login) {
      this.logjudgment = true;
      return;
    } else {
      this.logjudgment = false;
    }

    
  },
};
</script>

<style lang="less">
@import "../assets/css/base.css";
.box {
  // 滑动图片
  .swiper-container-02 {
    width: 100%;
    overflow: hidden;
    .swiper-wrapper {
      display: flex;
    }
  }
  .content {
    width: 100%;
    padding-bottom: 15px;
    .item {
      width: 66px;
      .img {
        width: 66px;
        height: 88px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        width: 66px;
        overflow: hidden;
        font-size: 13px;
        max-height: 36px;
        color: #3a3939;
        margin: 5px 0px;
      }
      .name {
        font-size: 12px;
        color: #969ba3;
        height: 12px;
        width: 66px;
        line-height: 12px;
        overflow: hidden;
      }
    }
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 30px;
  }
  .hearder {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 4px 0;
    .heatext {
      flex: 0 0 104px;
      font-size: 18px;
      color: black;
      padding: 0 16px;
      font-weight: 600;
    }
    .age {
      display: flex;
      height: 24px;
      border: 1px solid #ed424b;
      border-radius: 3px;
      div {
        font-size: 15px;
        line-height: 24px;
        color: #ed424b;
        padding: 0px 10px;
      }
      .com {
        background: #ed424b;
        color: white;
      }
    }
    .my {
      flex: 0 0 84px;
      display: flex;
      padding-left: 53px;
      justify-content: center;
      div {
        text-align: center;
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 19px;
        color: #f0757c;
      }
    }
  }
  .banner {
    &::before {
      position: relative;
      content: "";
      display: block;
      height: 124px;
      position: absolute;
      width: 375px;
      z-index: -1;
    }
    .imgs {
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      width: 94%;
      height: 121px;
      overflow: hidden;
      img {
        width: 100%;
        overflow: hidden;
      }
    }
  }
  .search {
    width: 100%;
    margin-top: 7px;
    .inp {
      width: 94%;
      margin: 0 auto;
      height: 32px;
      border-radius: 5px;
      border: transparent;
      text-align: center;
      color: #969ba3;
      line-height: 32px;
      background: white;
    }
  }
  .home-nav {
    margin: 6px 0px 12px 0px;
    background: white;
    width: 100%;
    display: flex;
    justify-content: space-around;
    .item {
      padding: 15px 0;
      width: 58px;
      height: 58px;
      text-align: center;
      font-size: 16px;
      color: black;
      div {
        margin-top: 5px;
        font-size: 13px;
        color: #5a5a5a;
        font-weight: 600;
      }
    }
  }
  .hot {
    width: calc(100% - 30px);
    padding: 0px 15px;
    background: white;
    margin-bottom: 12px;
    // 精选专题
    .advertisement {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;
      .img {
        width: 45%;
        padding: 8px;
        img {
          width: 100%;
        }
      }
    }
    .signin {
      height: 56px;
      line-height: 56px;
      text-align: center;
      font-size: 14px;
      color: black;
      font-weight: 600;
      border-bottom: 1px solid #f0f1f2;
      span {
        color: #4284ed;
      }
    }
    // 新书推荐 畅销完本
    .newarrivals {
      display: flex;
      flex-direction: column;
      .newbook {
        padding-bottom: 10px;
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        border-bottom: 1px solid #ebedf1;
        .left {
          width: 66px;
          height: 88px;
          margin-right: 8px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          width: 269px;
          .top {
            font-size: 16px;
            font-weight: 900;
            color: #33373d;
            line-height: 1.4;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .centenr {
            color: #969ba3;
            font-size: 14px;
            line-height: 1.1875rem;
            display: -webkit-box;
            height: 2.25rem;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 6px 0;
          }
          .bottom {
            display: flex;
            color: #969ba3;
            font-size: 12px;
            justify-content: space-between;
            .bookname {
              font-size: 13px;
              .icon-31wode {
                margin-right: 3px;
                font-size: 13px;
              }
            }
            .label {
              display: flex;
              span {
                margin-left: 2px;
                font-size: 12px;
                display: block;
                padding: 1px 2px;
                transform: scale(0.8);
              }
              span:nth-child(1) {
                border: 1px solid #969ba3;
                color: #969ba3;
              }
              span:nth-child(2) {
                border: 1px solid #ed424b;
                color: #ed424b;
              }
              span:nth-child(3) {
                border: 1px solid #008dff;
                color: #008dff;
              }
            }
          }
        }
      }
      .newbook:nth-child(3) {
        border-block: 0px;
      }
    }
    //分类
    .switch {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      div {
        flex: 1;
        border-top: 1px solid #ed424b;
        border-bottom: 1px solid #ed424b;
        border-right: 1px solid #ed424b;
        padding: 4px 0px;
        text-align: center;
        font-size: 15px;
        color: #ed424b;
      }
      div:first-child {
        border-left: 1px solid #ed424b;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      div:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    }
    .switchcon {
      background: #ed424b;
      color: white !important;
    }
    .hotnav {
      padding: 15px 0px;
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      position: relative;
      // 倒计时
      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #736e6e;
        font-weight: 600;
      }
      .block {
        display: inline-block;
        width: 14px;
        height: 14px;
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        background-color: black;
      }
      .dayblock {
        display: inline-block;
        width: 14px;
        height: 14px;
        line-height: 16px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #ed424b;
      }
      .more {
        font-size: 14px;
        color: #a4a8c3;
        border: 0px;
        position: absolute;
        top: 15px;
        right: 0px;
      }
      .div {
        font-size: 16px;
        font-weight: 600;
        padding: 0px 9px;
        border-left: 2px solid red;
      }
      span {
        font-size: 13px;
        height: 21px;
        color: #969ba3;
        display: inline-block;
        line-height: 25px;
      }
    }
  }
  .hotcon {
    margin-bottom: 0px;
  }
}
</style>